import React, { useState } from 'react'
import Text from './Text'
import Image from './Image'
const Message = () => {
    const [messages, setMessages] = useState([
        {
            type: 'text',
            content: 'Hello world'
        },
        {
            type: 'image',
            content: 'https://picsum.photos/200/300'
        }
    ])
    return (
        <div>
          <h1>Message</h1>
          <ul>
            {
                messages.map(msg => {
                    if (msg.type === 'text') {
                        return (<ol>
                            <Text config={msg} />
                        </ol>) 
                    } else if (msg.type === 'image') {
                        return (<ol><Image config={msg} /></ol>)
                    }
                })
            }
          </ul>
        </div>
    )
}
export default Message
